<!--  -->
<template>
  <div>
    <div class="filterconditions">
      <div class="conditionitem">
        <div class="tag">
          <at-tag color="primary">会议室地点</at-tag>
        </div>
        <div class="content">
          <at-checkbox-group v-model="conferenceposition" @on-change="handlefilter()">
            <at-checkbox :label="item" v-for="(item,index) in addrlist" :key="index">{{item}}</at-checkbox>
          </at-checkbox-group>
        </div>
      </div>
      <div class="conditionitem">
        <div class="tag">
          <at-tag color="primary">硬件设备</at-tag>
        </div>
        <div class="content">
          <at-checkbox-group v-model="conferencedevice" @on-change="handlefilter()">
            <at-checkbox :label="item" v-for="(item,index) in devicelist" :key="index">{{item}}</at-checkbox>
          </at-checkbox-group>
        </div>
      </div>
      <div class="conditionitem">
        <div class="tag">
          <at-tag color="primary">可容纳人数</at-tag>
        </div>
        <div class="content">
          <at-radio v-model="conferencenumber" label="0-10">0-10人</at-radio>
          <at-radio v-model="conferencenumber" label="10-50">10-50人</at-radio>
          <at-radio v-model="conferencenumber" label="51-999">50人以上</at-radio>
        </div>
      </div>
      <div class="conditionitem">
        <div class="tag">
          <at-tag color="primary">摆设</at-tag>
        </div>
        <div class="content">
          <at-checkbox-group v-model="conferencedecorate">
            <at-checkbox label="茶点布置">茶点布置</at-checkbox>
            <at-checkbox label="水果布置">水果布置</at-checkbox>
          </at-checkbox-group>
        </div>
      </div>
      <at-button type="primary" @click="clearfilter" class="clearfilter">重置</at-button>
    </div>
    <div class="conferencelist">
      <InforBlock
        :title="item.name"
        :detail="`可容纳${item.number}人`"
        :infor="item"
        v-for="(item,index) in roomlist"
        :key="index"
        class="listitem"
      ></InforBlock>
    </div>
  </div>
</template>

<script>
import InforBlock from "./InforBlock";
import { mapState, mapMutations } from "vuex";
import { setCookie, getCookie, removeCookie } from "../../assets/js/common";
import { fetch, post } from "../../config/request";
import Axios from "axios";
export default {
  data() {
    return {
      conferenceposition: [],
      conferencedevice: [],
      conferencenumber: "",
      conferencedecorate: [],
      addrlist: [],
      devicelist: [],
      roomlist: [],
      totalroomlist: []
    };
  },

  components: { InforBlock },

  computed: {
    ...mapState(["meetingroom", "rooms"])
  },
  created() {
    let roomstate = this.$store.state.rooms;
    if (roomstate.length == 0) {
      this.getlist();
    } else {
      this.roomlist = this.rooms;
      this.roomlist.map((item, index) => {
        let devicelist = [];
        this.$set(item, "number", Math.ceil(Math.random() * 150));
        this.addrlist.push(item.addr);

        item.devices.map(deviceitem => {
          devicelist.push(deviceitem.name);
          this.devicelist.push(deviceitem.name);
        });
        this.$set(item, "devicelist", devicelist);
      });
      this.totalroomlist = JSON.parse(JSON.stringify(this.roomlist));
    }
    this.totalroomlist.map((item, index) => {
      this.addrlist.push(item.addr);
      item.devices.map(deviceitem => {
        this.devicelist.push(deviceitem.name);
      });
    });
    this.addrlist = [...new Set(this.addrlist)];
    this.devicelist = [...new Set(this.devicelist)];
  },
  watch: {
    conferencenumber() {
      this.handlefilter();
      if (this.conferencenumber != "") {
        let number = this.conferencenumber.split("-");
        let min = parseInt(number[0]);
        let max = parseInt(number[1]);
        this.roomlist = this.roomlist.filter(item => {
          return (item.number > min || item.number == min) && item.number < max;
        });
      }
    }
  },
  methods: {
    clearfilter() {
      this.roomlist = JSON.parse(JSON.stringify(this.totalroomlist));
      this.conferencenumber = "";
      this.conferencedevice = [];
      this.conferenceposition = [];
      this.conferencedecorate = [];
    },
    handlefilter() {
      let addrlist = [];
      if (this.conferenceposition.length == 0) {
        addrlist = this.totalroomlist;
      } else {
        addrlist = this.totalroomlist.filter(item => {
          return this.conferenceposition.indexOf(item.addr) != -1;
        });
      }
      let devicelist = [];
      if (this.conferencedevice.length == 0) {
        devicelist = this.totalroomlist;
      } else {
        addrlist.map((item, index) => {
          let flag = true;
          if (item.devicelist.length == 0) {
            flag = false;
          } else {
            for (let roomdeviceindex in item.devicelist) {
              flag = true;
              for (let choosedeviceindex in this.conferencedevice) {
                if (
                  item.devicelist.indexOf(
                    this.conferencedevice[choosedeviceindex]
                  ) == -1
                ) {
                  flag = false;
                  break;
                }
              }
            }
          }
          if (flag) {
            devicelist.push(item);
          }
        });
      }
      let idarray = [];
      addrlist.map((item, index) => idarray.push(item.ID));
      let newlist = devicelist.filter(x => idarray.indexOf(x.ID) != -1);

      this.roomlist = newlist;
    },
    async getlist() {
      this.roomlist = await this.getrooms();
      this.totalroomlist = JSON.parse(JSON.stringify(this.roomlist));
      this.changeRooms({
        rooms: this.roomlist
      });
    },
    getrooms() {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/room").then(res => {
          let room = res.data.rooms.list;
          let devicelist = [];
          room.map((item, index) => {
            devicelist = [];
            item.number = Math.ceil(Math.random() * 150);
            this.addrlist.push(item.addr);

            item.devices.map(deviceitem => {
              devicelist.push(deviceitem.name);
              this.devicelist.push(deviceitem.name);
            });
            this.$set(item, "devicelist", devicelist);
          });
          this.addrlist = [...new Set(this.addrlist)];
          this.devicelist = [...new Set(this.devicelist)];
          resolve(room);
        });
      });
    },
    ...mapMutations(["changeRooms"])
  }
};
</script>
<style scoped lang="scss">
.filterconditions {
  position: relative;
  .conditionitem {
    width: 100%;
    border-bottom: 1px solid rgb(228, 228, 228);
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    .content {
      flex: 1;
      text-align: left;
      padding: 0 20px;
    }
  }
  .clearfilter {
    position: absolute;
    right: 0px;
    margin-top: 10px;
  }
}
.conferencelist {
  display: flex;
  margin-top: 50px;
  .listitem {
    margin: 10px;
  }
}
</style>
<style>
.at-checkbox + .at-checkbox,
.at-checkbox {
  margin: 0 16px 0 0 !important;
}
</style>